<template>
  <div class="login">
    <div>
    <div class="account_top_box">
      <div class="logo_box">
        <img src="../../assets/img/logo.png" alt="" srcset="">
      </div>
      <div class="lang_box" @click="changeLang()">
          <p class="label label-important exch_bck">{{lang}}</p>
      </div>
    </div>
    <div class="account_box">
      <ul>
        <li class="account_input">
          <i class="iconfont icon-phone"></i>
          <label for="">
            <!-- <input :type="accountType" v-model="phone" placeholder="填写登录账号"> -->
            <input type="text" v-model.trim="phone" :placeholder="$t('lang.inputUname')" >
          </label>
          <!-- <div class="exchemail">
            <p  v-show="accountType=='text'" @click="showIdword"><i class="iconfont icon-qiehuanzhanghao"></i><span>手机号</span></p>
            <p  v-show="accountType=='email'" @click="showIdword"><i class="iconfont icon-qiehuanzhanghao"></i><span>邮箱</span></p>
          </div> -->
        </li>
        <li class="account_input">
          <i class="iconfont icon-password"></i>
          <label for="">
            <input :type="passwordType" v-model.trim="password" :placeholder="$t('lang.passwordPlaceholder')">
          </label>
          <em class="iconfont icon-eye-close" v-show="passwordType=='password'" @click="showPassword"></em>
          <em class="iconfont icon-eye-open" v-show="passwordType=='text'" @click="showPassword"></em>
        </li>
        <li class="account_input">
          <i class="iconfont icon-ver-code"></i>
          <label for="">
            <input type="number" v-model.trim="code" :placeholder="$t('lang.InputPlaceholder')">
          </label>
          <span class="ver_code" @click="refreshCode">
            <ver-code :identifyCode="identifyCode"></ver-code>
          </span>
        </li>
        <li class="account_btn_box">
          <van-button size="large" class="account_btn" @click="login">{{$t("lang.signIn")}}</van-button>
        </li>
        <li class="forget_password_box">
          <span ></span>
          <span @click="pushPath('/forgetPassword')">{{$t("lang.forgotPassword")}}?</span>
        </li>
      </ul>
    </div>
  </div>
  </div>
</template>

<script>
import verCode from '@/components/verCode';
import { Toast } from "vant";
export default {
  name: "Login",
  data() {
    return {
      phone:'',
      password:'',
      code:'',

      passwordType:'password',
      accountType:"text",
      //验证码随机生成的数字
      identifyCodeArr: "1234567890",
      //生成的四位数
      identifyCode: "",
      // 设置语言切换
      locale:"",
      lang:'',
      Silang:"",
      trueName:null,
    };
  },
  components: {
    'ver-code':verCode,
  },
  watch:{
    '$route'(val,oldval){
      if(oldval.fullPath.indexOf('?')!=-1){
        this.qrPopup = false;
      }
      if(val.fullPath.indexOf('?qrPopup')!=-1){
        this.qrPopup = true;
      }
    },
    locale(val){
      this.$i18n.locale=val;
    }
  },
  created: function() {
    
  },
  mounted(){
    this.identifyCode = "";
    this.makeCode(this.identifyCodeArr, 4);
    //页面初始化 中英文判断
    this.Silang=localStorage.getItem('lang');
    console.log(this.Silang)
    if(this.Silang=='zh_CN'){
      this.lang='中文';
      this.$i18n.locale = 'zh_CN';
    }else if(this.Silang=='en_US'){
      this.lang='English';
      this.$i18n.locale = 'en_US';
    }else if(!this.Silang){
      this.lang='English';
      this.$i18n.locale = 'en_US';
      localStorage.setItem('lang','en_US'); //默认存入英文
    }else{
      this.lang='English';
      this.$i18n.locale = 'en_US';
      localStorage.setItem('lang','en_US'); //默认存入英文
    }
    this.$store.commit('updateLoginState',false);
    console.log(this.Silang)
  },
  methods: {
    showPassword(){
      if(this.passwordType == 'password'){
        this.passwordType = 'text';
      }else{
        this.passwordType = 'password';
      }
    },
    getTrueName(){
      // 对会员信息进行判断
       this.$ajax(this.$api.getMyInfo).then(res=>{
          this.trueName =res.msg.trueName;
          if(this.trueName == "" || this.trueName ==null){
            console.log("无信息输入")
            this.$router.push({
              path:"/Authentication",
              replace:true
            });
          }else{
            console.log(this.trueName)
            this.$router.push({
              path:"/",
              replace:true
            });
          }
       })
    },
    showIdword(){
      if(this.accountType == 'text'){
        this.accountType = 'email';
      }else{
        this.accountType = 'text';
      }
    },
    //验证码方法
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodeArr, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodeArr[
          this.randomNum(0, this.identifyCodeArr.length)
        ];
      }
    },
    //登录
    login: function(message, event) {
      if(this.accountType == 'email'){
        this.phone=this.phone;
      }else if(this.accountType == 'number'){
        if(!this.$validator.isPhone(this.phone)){
          Toast({message: "请填写正确的登录账号！",position: "bottom"});
          return;
        }
      }
      
      if(!this.$validator.isPassword(this.password)){
        Toast({message: "登录密码格式应为6-12位数字或字母！",position: "bottom"});
        return;
      }
      if(this.code!=this.identifyCode){
        this.refreshCode();
        Toast({
          message: "请填写正确的验证码！",
          position: "bottom",
        });
        return;
      }
      this.$ajax(this.$api.login, { phone: this.phone, password: this.password })
        .then(res => {
          if (res.code == 0) {
            //本地缓存token
            localStorage.setItem("token", res.msg);
            localStorage.setItem('phone',this.phone);
            //判断有无重定向地址 有就跳没有就跳默认地址
            if (this.$router.history.current.query.redirect) {
              this.$router.push(this.$router.history.current.query.redirect);
            } else {
              this.getTrueName();
            }
            this.$store.commit('updateLoginState',true)
          }else if(res.status==501){
            Toast({message: "股权配送中",position: "bottom"});
            this.$router.replace('/')}
            else if(res.status==502){
            Toast({message: "系统维护中",position: "bottom"});
            this.$router.replace('/')
          }else{
            Toast({message: res.msg,position: "bottom"});
            this.refreshCode();
            this.phone = '';
            this.password = '';
            this.passwordType = 'password';
            this.code = '';
          }
        })
    },
    changeLang () {
      // 增加传入语言
      console.log(this.locale);
      if(this.locale=='zh_CN'){
          this.lang='English';
          this.locale='en_US';
      }else{
          this.lang='中文';
          this.locale='zh_CN';
      }
      this.$cookies.set('lng', this.locale=='zh_CN'?'0':'1', 1);
      localStorage.setItem("lang",this.locale);
      //window.location.reload();//进行刷新改变cookie里的值
    },

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login{
  overflow-x: hidden;
}
.account_top_box{
  height:44vh;
  min-height: 320px;
  /* border-radius: 50%;
  width: 200%;
  margin-left: -50%;
  margin-top: -50%;
  overflow-x: hidden; */
  background: url(../../assets/img/login/dl_bg.png) 0 0 no-repeat;
  background-size: 100%;
  position: relative;
}
.logo_box{
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
  top: 3vh;
  text-align: center;
}
.logo_box img{
  width: 80%;
  margin-top: 10%;
}
.account_box{
  background: #fff;
  padding: 0 20px 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.account_box li{
  text-align: center;
  border-bottom: 1px #eee solid;
  line-height: 30px;
  color: #666;
  padding: 30px 0 5px;
}
.account_input{
  display: flex;
  font-size: 14px;
}
.account_input i{
  display: inline-block;
  font-size: 24px;
  max-width: 40px;
  flex: 1;
  margin: auto;
}
.account_input label{
  flex: 1;
}
.account_input input{
  height: 30px;
  border: none;
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
  color: #666;
}
.account_input em{
  max-width: 25px;
  flex: 1;
  color: #25a3fe;
  font-size: 25px;
}
.account_input span{
  max-width: 80px;
  flex: 1;
  line-height: 0;
}
.forget_password_box{
  display: flex;
  justify-content: space-between;
  padding: 0px 0 0!important;
  font-size: 12px!important;
  text-align: right!important;
  border: none!important;
}
.forget_password_box span:first-child{
  color: #f44;
}
.account_btn_box{
  border:none!important;
  padding: 15px 0!important;
}
.account_btn{
  background-color: #8A0402;
  color: #fff;
  border-radius:44px;
  margin-top: 50px;
}
.exchemail{border: 1px solid #999999; width:80px;}
.account_input  .exchemail  p{color: #999999;font-size: 14px;}
.account_input  .exchemail i{font-size: 15px!important;line-height: 20px;height: 20px;}
.account_input  .exchemail span{font-size: 14px!important;line-height: 20px;height: 20px;margin-left: 5px;}
/* 中英文 */
.lang_box{position: absolute;top: 20px;right: 20px;color: #e0be85;}
</style>
